<template>
  <div class="water_box">
    <div class="water" ref="water_echarts"></div>
    <div class="centernum">
      <div class="water_name">公共课程</div>
      <div class="water_value">{{ number }}%</div>
    </div>
  </div>
</template>

<script>
import echartsLiquidfill from './mixins/echarts-liquidfill'

export default {
  props: {
    // 显示的数据
    waterData: {
      type: Object,
      default: () => {
        return {
          type: '公共课程',
          value: 0.6,
        }
      },
    },
    // 保留小数点
    toFixed: {
      type: Number,
      default: () => {
        return 0
      },
    },
    // 水位颜色
    waterColor: {
      type: Array,
      default: () => {
        return ['#2693FF', '#00DD8A']
      },
    },
  },
  data() {
    return {
      number: (this.waterData.value * 100).toFixed(this.toFixed),
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.drawCharts()
    })
  },
  methods: {
    drawCharts() {
      let that = this
      let chart = this.echarts.init(this.$refs.water_echarts)
      let option = {
        // tooltip: {
        //   trigger: "item", // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
        //   textStyle: {
        //     color: "#fff", // 文字颜色
        //   },
        //   // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
        //   // 水球图: {a}（系列名称），{b}（无），{c}（数值）
        //   // 使用函数模板   传入的数据值 -> value: number|Array,
        //   formatter: function (value) {
        //     return value.seriesName + ": " + value.data * 100 + "%";
        //   },
        // },
        series: [
          {
            type: 'liquidFill',
            name: '水球图', // 系列名称，用于tooltip的显示，legend 的图例筛选
            radius: '100%', // 水球图的半径
            center: ['50%', '50%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
            // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
            // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
            shape: 'circle',
            phase: 0, // 波的相位弧度 不设置  默认自动
            direction: 'right', // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
            outline: {
              show: true,
              borderDistance: 2, // 边框线与图表的距离 数字
              itemStyle: {
                opacity: 0.25, // 边框的透明度   默认为 1
                borderWidth: 1, // 边框的宽度
                shadowBlur: 0, // 边框的阴影范围 一旦设置了内外都有阴影
                // shadowColor: '#fff', // 边框的阴影颜色,
                borderColor: '#00BFFF', // 边框颜色
              },
            },
            // 图形样式
            itemStyle: {
              color: new that.echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: that.waterColor[1],
                },
                {
                  offset: 1,
                  color: that.waterColor[0],
                },
              ]), // 水球显示的背景颜色
              opacity: 1, // 波浪的透明度
              shadowBlur: 10, // 波浪的阴影范围
            },
            backgroundStyle: {
              color: '#373F55', // 水球未到的背景颜色
              opacity: 0.25,
            },
            // 图形的高亮样式
            emphasis: {
              itemStyle: {
                opacity: 1, // 鼠标经过波浪颜色的透明度
              },
            },
            // 图形上的文本标签
            label: {
              show: false,
            },
            data: [that.waterData.value], // 系列中的数据内容数组
          },
        ],
      }

      chart.setOption(option)
    },
  },
}
</script>

<style lang="scss" scoped>
.water_box {
  position: relative;
  width: 100%;
  height: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  .water {
    width: 100%;
    height: 100%;
  }
  .centernum {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #94d2f3;
    .water_name {
      font-size: 20px;
      margin-bottom: 20px;
      font-weight: bold;
    }
    .water_value {
      font-size: 18px;
    }
  }
}
</style>
